<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>华富</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<style>
    /***banner***/
    .banner{
      width: 100%;
    }
    .banner_list{
      width: 100%;
    }
    /***banner***/


    /***index_class***/
    .index_class{
      width: calc(100% - 2.6rem);
      margin: 0 auto;
      border-radius: 0.7rem;
      background: #fff;
      margin-top: -4rem;
      position: relative;
      z-index: 2;
    }
    .index_class::before{
      width: 100%;
      height: 0.1rem;
      background: #f5f5f5;
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -1px;
    }
    .index_class ul{
      padding: 0 1.2rem;
    }
    .index_class ul li{
      width: 25%;
      float: left;
      text-align: center;
      padding: 1rem 0 1.3rem 0;
      border-right: 0.1rem solid #f5f5f5;
    }
    .index_class ul li:nth-child(4n){
      border-right: none;
    }
    .index_class ul li img{
      width: 4rem;
      display: inline-block;
    }
    .index_class ul li span{
      display: block;
      text-align: center;
      font-size: 1.2rem;
      color: #666;
      line-height: 1;
      margin-top: 0.6rem;
    }
    /***index_class***/


    /***index_supplier***/
    .index_supplier{
      width: calc(100% - 2.6rem);
      margin: 0 auto;
      margin-top: 1rem;
    }
    .index_supplier img{
      border-radius: 0.7rem;
      overflow: hidden;
    }
    /***index_supplier***/


    /***index_new***/
    .index_new{
      width: 100%;
      padding: 0 1.3rem 1.3rem 1.3rem;
    }
    .index_new .index_h5{
      background: #f5f5f5;
    }
    .index_new_con{
      width: 100%;
    }
    .index_new_list{
      width: 100%;
      border-radius: 0.7rem;
      overflow: hidden;
      position: relative;
    }
    .index_new_zi{
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      padding: 0.75rem;
      background: rgba(0, 0, 0, 0.5);
    }
    .index_new_zi h5{
      margin: 0;
      font-size: 1.2rem;
      color: #fff;
      line-height: 1;
      margin-bottom: 0.5rem;
    }
    .index_new_zi p{
      margin: 0;
      font-size: 1.2rem;
      color: #fff;
      line-height: 1;
    }
    .index_new_zi p span{
      font-size: 1rem;
      position: relative;
      color: #fff;
      margin-left: 0.9rem;
    }
    .index_new_zi p span:before{
      width: 100%;
      height: 0.1rem;
      background: #f5f5f5;
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -1px;
    }
    .index_new_list:nth-child(2){
      margin-top: 0.4rem;
    }
    /***index_new***/


    /***index_recommend***/
    .index_recommend{
      width: 100%;
    }
    .index_recommend_con{
      width: 100%;
      padding: 1.5rem 1.3rem;
    }
    .index_recommend_list{
      /*margin-bottom: 1rem;*/
      border-radius: 0.7rem;
    }
    .index_recommend_img{
      width: 50%;
      float: left;
    }
    .index_recommend_zi{
      width: 50%;
      float: left;
      background: #fff;
      padding:1rem;
      padding-top: 0.8rem;
    }
    .index_recommend_zi font{
      display: inline-block;
      line-height: 1.5rem;
      padding: 0 0.5rem;
      background: #fbe1d2;
      font-size: 1rem;
      color: #ed6a20;
    }
    .index_recommend_zi h5{
      font-size: 1.3rem;
      color: #333;
      line-height: 1.1;
      height: 3rem;
      margin-top: 0.8rem;
      margin-bottom: 1rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .index_recommend_zi p{
      margin: 0;
      font-size: 1.3rem;
      color: #000;
    }
    .index_recommend_zi p span{
      font-size: 1rem;
      position: relative;
      color: #999;
      margin-left: 0.9rem;
    }
    .index_recommend_zi p span:before{
      width: 100%;
      height: 0.1rem;
      background: #999;
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -1px;
    }

    .swiper-pagination-recommend{
	    bottom: -0.4rem !important;
    }
    .swiper-pagination-recommend .swiper-pagination-bullet-active{
	    background:#ed6a20;
	  }

    /***index_recommend***/




    /***index_hot***/
    .index_hot{
      width: 100%;
      background: #fff;
      margin-bottom: 1rem;
    }
    .index_hot_banner{
      width: 100%;
    }
    .index_hot_con{
      width: 100%;
      margin: 1rem 0;
    }
    .index_hot_list{
      position: relative;
    }
    .index_hot_list h5{
      margin: 1rem 0;
      font-size: 1.4rem;
      color: #333;
      line-height: 1;
      padding: 0 0.5rem;
    }
    .index_hot_list p{
      font-size: 1.3rem;
      color: #333;
      line-height: 1;
      padding: 0 0.5rem;
      padding-bottom: 1.2rem;
    }
    .index_hot_list span{
      display: inline-block;
      line-height: 1.5rem;
      padding: 0 0.5rem;
      background: #ed6a20;
      font-size: 1rem;
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
    }
    /***index_hot***/


    /***index_product***/
    .index_product{
      width: 100%;
    }
    .index_product_con{
      width: 100%;
      padding:0.4rem;
    }
    .index_product_list{
      width: 100%;
      background: #fff;
      border-radius: 0.5rem;
      overflow: hidden;
      margin-bottom: 0.4rem;
    }
    .index_product_zi{
      padding: 1.3rem 0.9rem;
    }
    .index_product_zi h5{
      font-size: 1.3rem;
      line-height: 1.2;
      color: #0a0a0a;
      margin-bottom: 1.2rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .index_product_zi h5 font{
      display: inline-block;
      line-height: 1.5rem;
      font-size: 1rem;
      color: #fff;
      background: #ed6a20;
      border-radius: 0.2rem;
      margin-right: 0.2rem;
      padding: 0 0.4rem;
      vertical-align: top;
    }
    .index_product_zi p{
      font-size: 1.5rem;
      color: #f01818;
      line-height: 1.2;
    }
    .index_product_zi p span{
      float: right;
      line-height: 2rem;
      font-size: 1.1rem;
      color: #666666;
      border: 1px solid #999;
      padding: 0 1rem;
      border-radius: 2rem;
      position: relative;
      top: -0.2rem;
    }
    /***index_product***/
    .aui-toast-content {
        color: #fff;
    }

</style>
<body>
<div id="app" style="background: #f5f5f5;">

  <!--search-->
  <div class="search">
    <div class="search_con">
      <div class="search_map">{{city}}</div>
      <div class="search_input">
        <input type="text" placeholder="搜索" onclick="goSearch()">
        <div class="search_ss" onclick="goSearch()"><img src="../../image/search_icon2.png"></div>
        <div class="search_sm"><img src="../../image/search_icon1.png"></div>
      </div>
      <div class="search_info">
        <img src="../../image/search_info.png">
        <span>5</span>
      </div>
    </div>
  </div>
  <!--/search-->


  <div class="aui-refresh-content">
  <!--banner-->
  <div class="banner marginTop4">
    <div class="swiper-container swiper-container-banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item , index) in indexBanner">
          <div class="banner_list">
            <img :src="item.img_pic" width="100%">
          </div>
        </div>
      </div>
		</div>
  </div>
  <!--/banner-->


  <!--index_class-->
  <div class="index_class">
    <ul class="clearfix">
      <li onclick="clickindex('newclassify')">
        <img src="../../image/class_icon1.png">
        <span>最新上架</span>
      </li>
      <li onclick="clickindex('hotclassify')">
        <img src="../../image/class_icon2.png">
        <span>热门精选</span>
      </li>
      <li onclick="goPage('store','store.html')">
        <img src="../../image/class_icon3.png">
        <span>店铺展示</span>
      </li>
      <li onclick="goPage('famous','famous.html')">
        <img src="../../image/class_icon4.png">
        <span>名人文化</span>
      </li>
      <li onclick="goPage('company','company.html')">
        <img src="../../image/class_icon5.png">
        <span>企业信息</span>
      </li>
      <li>
        <img src="../../image/class_icon6.png">
        <span>电子家谱</span>
      </li>
      <li>
        <img src="../../image/class_icon7.png">
        <span>充值中心</span>
      </li>
      <li @click="storeDetail">
        <img src="../../image/class_icon8.png">
        <span>全部商品</span>
      </li>
    </ul>
  </div>
  <!--/index_class-->
  <!--index_supplier-->
  <div class="index_supplier" @click="storeEntry">
    <img :src=storeImg.img_pic width="100%">
  </div>
  <!--/index_supplier-->
  <!--index_new-->
  <div class="index_new">
    <h5 class="index_h5" onclick="clickindex('newclassify')">最新上架</h5>
    <div class="index_new_con">
      <div class="row clearfix clm5">
        <div class="col-xs-6 clp5">
          <div class="index_new_list">
            <img src="../../image/index_new_1.jpg" width="100%">
            <div class="index_new_zi">
              <h5>{{indexNew1.title}}</h5>
              <p>¥{{indexNew1.price}}<span>¥{{indexNew1.oprice}}</span></p>
            </div>
          </div>
        </div>
        <div class="col-xs-6 clp5">
          <div class="index_new_list">
            <img src="../../image/index_new_2.jpg" width="100%">
            <div class="index_new_zi">
              <h5>{{indexNew2.title}}</h5>
              <p>¥{{indexNew2.price}}<span>¥{{indexNew2.oprice}}</span></p>
            </div>
          </div>
          <div class="index_new_list">
            <img src="../../image/index_new_2.jpg" width="100%">
            <div class="index_new_zi">
              <h5>{{indexNew3.title}}</h5>
              <p>¥{{indexNew3.price}}<span>¥{{indexNew3.oprice}}</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--index_new-->
  <!--index_new-->
  <div class="index_recommend">
    <h5 class="index_h5" onclick="clickindex('recommended')">今日推荐</h5>
    <div class="index_recommend_con">
      <div class="swiper-container swiper-container-recommend swiper-container-horizontal swiper-container-multirow">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(val,index) in indexRecommend" @click="goDetail(val.goods_id)">
            <div class="index_recommend_list clearfix" style="height:11rem;">
              <div class="index_recommend_img" style="height:100%">
                <img :src=val.goods_logo width="100%" id="imgHeight" height="100%">
              </div>
              <div class="index_recommend_zi" style="height:100%">
                <font>{{val.store_name}}</font>
                <h5 style="">{{val.goods_desc}}</h5>
                <div style="margin-bottom:-0.9rem">
                  <p>¥{{val.goods_price}}</p>
                  <p style="font-size:1rem;color:#999;margin-top:-0.2rem;text-decoration:line-through">¥{{val.oprice}}</p>
                </div>
              </div>
            </div>
          </div>
      </div>
      <!-- <div class="swiper-pagination swiper-pagination-recommend swiper-pagination-clickable swiper-pagination-bullets"></div> -->
    </div>
  </div>
  <!--/index_new-->
  <!--index_hot-->
  <div class="index_hot">
    <h5 class="index_h5" onclick="clickindex('hotclassify')">热门精选</h5>
    <div class="index_hot_banner">
      <img :src=hotImg.img_pic width="100%" height="">
    </div>
    <div class="index_hot_con">
      <div class="swiper-container swiper-container-hot">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="item in indexhot" @click="goDetail(item.goods_id)">
            <div class="index_hot_list">
              <span>{{item.store_name}}</span>
              <img :src=item.goods_logo width="100%">
              <h5>{{item.goods_name}}</h5>
              <p>¥{{item.goods_price}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--index_hot-->
  <!--index_product-->
  <div class="index_product">
    <h5 class="index_h5" @click="goclassifyPage">美妆护肤</h5>
    <div class="index_product_con">
       <div class="row clearfix clm2">
         <div class="col-xs-6 clp2" v-for="item in boxList" @click="goDetail(item.goods_id)">
           <div class="index_product_list">
            <img :src=item.goods_logo width="100%">
            <div class="index_product_zi">
              <h5><font>{{item.store_name}}</font>{{item.goods_name}}</h5>
              <p>¥{{item.goods_price}} <span>已售{{item.virtual_sales}}</span></p>
            </div>
           </div>
         </div>


       </div>
    </div>
  </div>
  <!--index_product-->
  </div>


</div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="../../script/axios-config.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>


<script type="text/javascript">

  var app;

  apiready = function(){
    var toast = new auiToast({})
    app = new Vue({
        el: '#app',
        data: {
          indexBanner:[],
          indexNew1:{},
          indexNew2:{},
          indexNew3:{},
          indexRecommend:[],
          indexhot:[],
          boxList:[],
          city:'',
          hotImg:{},
          storeImg:{},
        },
        created: function() {
          var $_this=this;
          api.showProgress({
              title: '努力加载中...',
              text: '先喝杯茶...',
              modal: false
          });
        },
        methods: {
          storeDetail:function(){
            api.openWin({
              name:'classClassigfy',
              url:'../class/class_classify.html'
            })
          },
          goDetail:function(goodsId){
            api.openWin({
                name:'classDetailHeader',
                url: '../class/class_detail_header.html',
                pageParam: {
                    goodsId:goodsId
                }
            });
          },
          //调转页面
          storeEntry:function(){
            // api.openWin({
            //     name: 'storeEntry',
            //     url: './store_entry.html'
            // });
            var $_this=this;
            if($api.getStorage('token') && $api.getStorage('token') != '' && $api.getStorage('token') != undefined){
              const data = {
                token:$api.getStorage('token'),
                type:1
              }
              Axios.post(window.Url.checkaddshop,data).then(function(res){
                console.log(JSON.stringify(res))
                if(res.status == 0){
                  api.openWin({
                      name: 'storeEntry',
                      url: './store_entry.html'
                  });
                }else{
                  api.openWin({
                      name: 'auditing',
                      url: './auditing.html',
                      pageParam: {
                          type: res.status
                      }
                  });

                }
              }).catch((err) => {
                console.log({ msg: JSON.stringify(err) });
              })
            }else{
              api.openWin({
                  name: 'Login',
                  url: '../user/login/login.html'
              });
            }

          },
          //商家入驻大图
          shopimg:function(){
            var _this = this
            api.ajax({
                url: window.hurl.shopimg,
                method: 'post',
                data: {
                    values: {}
                }
            },function(ret, err){
                if (ret) {
                    //console.log( JSON.stringify( ret ) );
                    if(ret.status == 1){
                      _this.storeImg = ret.data
                    }
                } else {
                    console.log( JSON.stringify( err ) );
                }
            });

          },
          //热门大图
          hotgoods:function(){
            var _this = this
            api.ajax({
                url: window.hurl.hotgoods,
                method: 'post',
                data: {
                    values: {}
                }
            },function(ret, err){
                if (ret) {
                    //console.log( JSON.stringify( ret ) );
                    if(ret.status == 1){
                      _this.hotImg = ret.data
                    }
                } else {
                    console.log( JSON.stringify( err ) );
                }
            });

          },
          //最新上架
          newgoods:function(){
            var _this = this
            var data={}
            Axios.post(window.Url.newgoods,data).then(function(res){
              //console.log(JSON.stringify(res))
              if(res.status==1){
                _this.indexNew1 = res.data[0];
                _this.indexNew2 = res.data[1];
                _this.indexNew3 = res.data[2];
              }else{
                toast.fail({
                  title:res.info,
                  duration:1000
                })
              }
            }).catch(function(err){
            //   console.log(JSON.stringify(err))
            })
          },
          //轮播图
          slideIndex:function(){
            var _this = this
            var data={}
            Axios.post(window.Url.index_slide_imgs,data).then(function(res){
            //  console.log(JSON.stringify(res))
              if(res.status==1){
                    _this.indexBanner = res.list;
                    _this.$nextTick(function () {banner()})
              }else{
                toast.fail({
                  title:res.info,
                  duration:1000
                })
              }
            }).catch(function(err){
              console.log(JSON.stringify(err))
            })
          },
          //服饰箱包
          closebox:function(){
            var _this = this
            var data={}
            Axios.post(window.Url.indexBox,data).then(function(res){
            ///  console.log(JSON.stringify(res))
              if(res.status==1){
                  _this.boxList = res.list;
              }else{
                toast.fail({
                  title:res.info,
                  duration:1000
                })
              }
            }).catch(function(err){
              console.log(JSON.stringify(err))
            })
          },
          //热门精选
          hotChoose:function(){
            var _this = this
            var data={type:'hot'}
            Axios.post(window.Url.hot_goods_list,data).then(function(res){
              //console.log(JSON.stringify(res))
              if(res.status==1){
                  _this.indexhot = res.list;
                  _this.$nextTick(function () {hot();})
              }else{
                toast.fail({
                  title:res.info,
                  duration:1000
                })
              }
            }).catch(function(err){
              console.log(JSON.stringify(err))
            })
          },
          //今日推荐
          remoList:function(){
            var _this = this
            var data={
              token:$api.getStorage('token'),
              page:1,
              num:10
            }
            Axios.post(window.Url.recommend_goods_list,data).then(function(res){
              //console.log(JSON.stringify(res))
              if(res.status==1){
                _this.indexRecommend = res.list.list;
                _this.$nextTick(function () {recommend();})
              }else{
                toast.fail({
                  title:res.info,
                  duration:1000
                })
              }
            }).catch(function(err){
                 console.log(JSON.stringify(err))
            })
          },
          //定位
          getLocation:function(){
            var _this = this
            var bMap = api.require('bMap');
            bMap.getLocationServices(function(ret, err) {
                if (ret.enable) {
                  bMap.getLocation({
                    accuracy: '100m',
                    autoStop: true,
                    filter: 1
                  }, function(ret, err) {
                    if (ret.status) {
                        console.log(JSON.stringify(ret));
                        bMap.getNameFromCoords({
                            lon: ret.lon,
                            lat: ret.lat
                        }, function(ret, err) {
                            console.log('位置:'+JSON.stringify(ret));
                            if (ret.status) {
                               _this.city = ret.city
                              console.log('位置:'+JSON.stringify(ret));
                            }else{
                              toast.fail({
                                    title:'定位失败',
                                    duration:3000
                              })
                            }
                        });
                    } else {
                      toast.fail({
                            title:err.code,
                            duration:3000
                      })
                    }
                  });
                } else {
                    toast.fail({
                          title:'未开启定位功能！',
                          duration:3000
                    })
                }
            });
          },
          classifyPage:function(){
            // api.openFrame({
            //     name: 'page2',
            //     url: '../class/index.html',
            // });
          },
          goclassifyPage:function(){
            api.openWin({
                name: 'classify',
                url: '../class/class_classify.html',
            });
          }
        },
        mounted: function () {
          api.hideProgress();
          setRefresh();
          wapHeight()
          this.getLocation()
          this.remoList()
          this.hotChoose()
          this.closebox()
          this.slideIndex()
          this.newgoods()
          this.hotgoods()
          this.shopimg()
        }
      })
  }
  //首页分类跳转
  function goPage(name,url,idd){
    api.openWin({
        name: name,
        url: url,
        pageParam: {
            id:idd
        }
    });
  }

  //刷新
  function setRefresh(){
      var pullRefresh = new auiPullToRefresh({
          container: document.querySelector('.aui-refresh-content'),
          triggerDistance: 100
      }, function(ret) {

          if (ret.status == "success") {
              setTimeout(function() {
                  pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
              }, 1500)
          }
      })
  }
  //banner
  function banner(){
    var mySwiper_banner = new Swiper ('.swiper-container-banner', {
      loop: true,
      speed: 800,
  	  autoplay : 5000,
  	  autoplayDisableOnInteraction : false,
    })
  }

  function recommend(){
    var mySwiper_recommend = new Swiper ('.swiper-container-recommend', {
      // loop: true,
      // loopedSlides :100,
      slidesPerView : 1.5,
      slidesPerColumn: 2,
	    spaceBetween : 20,
      // pagination: '.swiper-pagination-recommend',
  	  autoplay : 6000,
  	  autoplayDisableOnInteraction : false,
    })
  }

  function hot(){
    var mySwiper_hot = new Swiper ('.swiper-container-hot', {
    	slidesPerView : 2.4,
    	spaceBetween : 20,
    	autoplayDisableOnInteraction : false,
    	freeMode : true,
    })
  }

  function wapHeight(){
    $('.index_recommend_zi').height($('.index_recommend_zi').width());

  }
  function clickindex(name){
    api.openWin({
        name: name,
        url: './'+name+'.html',
    });

  }
  function goSearch(){
    api.openWin({
        name: 'search',
        url: './search.html',
        pageParam: {
            test:''
        }
    });
  }


</script>
